<template>
  <el-container class="exchange">
    <el-main>
      <el-card shadow="never" class="tableCard">
        <vxe-toolbar :refresh="{query: getList}" >
          <template v-slot:buttons>
            <!-- <el-button type="primary" icon="el-icon-plus" @click="openDialog({})">全部解绑</el-button> -->
          </template>
        </vxe-toolbar>
        <vxe-table
          ref="xTree"
          border
          row-key
          resizable
          highlight-hover-row
          :auto-resize="true"
          :data="list"
          :span-method="rowspanMethod"
          width
          max-height="500"
          row-id="id"
          highlight-current-row
          text-algin="center"
          :print-config="{}"
          header-align="center"
        >
          <vxe-table-column
            field="categoryName"
            width="100"
            title="消息类别"
          />
          <vxe-table-column
            field="code"
            width="180"
            title="消息代码"
          />
          <vxe-table-column
            field="name"
            min-width="350"
            title="消息名称"
          />
          <vxe-table-column title="系统消息" field="systemTemplateId" align="center" width="100">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.sysMsgEnable" :inactive-value="0" :active-value="1" active-text inactive-text
                         @change="changeTemplateStatus($event,scope,6)" />
            </template>
          </vxe-table-column>
          <vxe-table-column title="短信通知" field="smsMsgTemplateId" align="center" width="100">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.smsMsgEnable" :inactive-value="0" :active-value="1" active-text inactive-text
                       @change="changeTemplateStatus($event,scope,4)" />
            </template>
          </vxe-table-column>
          <vxe-table-column title="邮件通知" field="smsMsgTemplateId" align="center" width="100">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.emailMsgEnable" :inactive-value="0" :active-value="1" active-text inactive-text
                      @change="changeTemplateStatus($event,scope,5)" />
            </template>
          </vxe-table-column>
          <vxe-table-column title="操作" fixed="right" align="center" width="100" slots="default">
            <template slot-scope="scope">
              <div class="drag-btn">
                <el-button type="text" size="mini" @click="openDialog(scope.row.id)">设置</el-button>
              </div>
            </template>
          </vxe-table-column>
        </vxe-table>
      </el-card>
    </el-main>
    <el-dialog title="添加消息" :close-on-click-modal="false" :model="false" :visible.sync="dialogTableVisible" width="50%">
      <shopMessageSettingEdit v-if="id" :msgBindId="id"  :receiverType="receiverType" ref="messageSettingEdit" />
      <div class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import { listMsgBindConfig, saveMsgBindConfig, changeEnableStatus } from '@/api/messageSetting'
export default {
  components: {
    // eslint-disable-next-line vue/no-unused-components
    shopMessageSettingEdit: () => import('./shopMessageSettingEdit.vue')
  },
  data() {
    return {
      receiverType: 2,
      dialogTableVisible: false,
      title: '',
      addParams: {},
      addRules: {},
      dialog: false,
      list: [],
      total: 0,
      id: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      listMsgBindConfig({ receiverType: 2 }).then(res => {
        this.list = res
      })
    },
    openDialog(id) {
      this.dialogTableVisible = true
      this.id = ''
      this.$nextTick(() => {
        this.id = id
      })
    },
    changeTemplateStatus(val, scope, i){
        changeEnableStatus({
          id: scope.row.id,
          type:i,
          status: val
        }).then((response) => {
          if(response){
            switch (i) {
              case 4:
                //this.list[scope.seq - 1].smsMsgEnable = scope.row.smsMsgEnable === 1 ? 0 : 1
                this.$message.success( scope.row.smsMsgEnable === 0 ? '禁用成功' : '启用成功' )
                break
              case 5:
                //this.list[scope.seq - 1].emailMsgEnable = scope.row.emailMsgEnable === 1 ? 0 : 1
                this.$message.success( scope.row.emailMsgEnable === 0 ? '禁用成功' : '启用成功' )
                break
              case 6:
                //this.list[scope.seq- 1].sysMsgEnable = scope.row.sysMsgEnable === 1 ? 0 : 1
                this.$message.success( scope.row.sysMsgEnable === 0 ? '禁用成功' : '启用成功' )
            }
            this.getList()
          }else{
             this.getList()
          }
        }).catch(err => {
          this.getList()
      })
    },
    // 详情保存
    confirm() {
      saveMsgBindConfig(this.$refs.messageSettingEdit.formParams).then(res => {
        if (res === true) {
          this.$message.success('保存成功！')
          this.dialogTableVisible = false
          this.getList()
        }
      })
    },
    // 通用行合并函数（将相同多列数据合并为一行）
    rowspanMethod({ row, _rowIndex, column, visibleData }) {
      const fields = ['categoryName']
      const cellValue = row[column.property]
      if (cellValue && fields.includes(column.property)) {
        const prevRow = visibleData[_rowIndex - 1]
        let nextRow = visibleData[_rowIndex + 1]
        if (prevRow && prevRow[column.property] === cellValue) {
          return { rowspan: 0, colspan: 0 }
        } else {
          let countRowspan = 1
          while (nextRow && nextRow[column.property] === cellValue) {
            nextRow = visibleData[++countRowspan + _rowIndex]
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 }
          }
        }
      }
    }
  }
}
</script>

<style>

</style>
